<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>980px grid system | 14 columns ~ margin left: 10px ~ margin right: 10px &mdash; based on 960.gs</title>
<meta name="keywords" content="980px grid system, grid system generator, variable grid system, custom grid system, css framework, generator, xhtml, css, grid system generator, 960 grid generator, 960 grid system generator, web development workflow, web development cycle"/>
<meta name="description" content="The 980px grid system | 14 columns ~ margin left: 10px ~ margin right: 10px &mdash; is a valid css / xhtml framework for rapid prototyping, development and production environments (based on the 960.gs grid system)."/>
<meta name="generator" content="GridSystemGenerator.com - v1.04"/>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/text.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/980_14_10_10.css"/>
<style type="text/css" media="all">
body {
	background: #efefef;
	color: #333;
	font-size: 11px;
	padding: 20px 0 40px;
}
a {
	color: #333;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
.container_14 h1 {
	font-family: Georgia, serif;
	font-weight: normal;
	text-align: center;
}
.container_14 h2 {
	padding: 20px 0 0;
	font-family: Georgia, serif;
	font-weight: normal;
	text-align: center;
}
.container_14 p {
	border: 1px solid #666;
	overflow: hidden;
	padding: 10px 0;
	text-align: center;
	font-size: 80%;
}
.container_14 {
	background-color:#FFFFFF;
	background-image: url(images/980_14_10_10.png);
	background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="container_14">
<h1><a href="http://www.gridsystemgenerator.com/gs01.php?GridWidth=980&amp;GridColumns=14&amp;GridMarginLeft=10&amp;GridMarginRight=10">980px valid css/xhtml 960.gs grid system</a></h1>
<h2>14 columns ~ margin left: 10px ~ margin right: 10px</h2>
<div class="grid_14"><p>960px</p></div>
<!-- end .grid_14 -->
<div class="clear">&nbsp;</div>
<div class="grid_1">
<p>50px</p>
</div>
<!-- end .grid_1 -->
<div class="grid_13">
<p>890px</p>
</div>
<!-- end .grid_13 -->
<div class="clear">&nbsp;</div>
<div class="grid_2">
<p>120px</p>
</div>
<!-- end .grid_2 -->
<div class="grid_12">
<p>820px</p>
</div>
<!-- end .grid_12 -->
<div class="clear">&nbsp;</div>
<div class="grid_3">
<p>190px</p>
</div>
<!-- end .grid_3 -->
<div class="grid_11">
<p>750px</p>
</div>
<!-- end .grid_11 -->
<div class="clear">&nbsp;</div>
<div class="grid_4">
<p>260px</p>
</div>
<!-- end .grid_4 -->
<div class="grid_10">
<p>680px</p>
</div>
<!-- end .grid_10 -->
<div class="clear">&nbsp;</div>
<div class="grid_5">
<p>330px</p>
</div>
<!-- end .grid_5 -->
<div class="grid_9">
<p>610px</p>
</div>
<!-- end .grid_9 -->
<div class="clear">&nbsp;</div>
<div class="grid_6">
<p>400px</p>
</div>
<!-- end .grid_6 -->
<div class="grid_8">
<p>540px</p>
</div>
<!-- end .grid_8 -->
<div class="clear">&nbsp;</div>
<div class="grid_7">
<p>470px</p>
</div>
<!-- end .grid_7 -->
<div class="grid_7">
<p>470px</p>
</div>
<!-- end .grid_7 -->
<div class="clear">&nbsp;</div>
<div class="grid_8">
<p>540px</p>
</div>
<!-- end .grid_8 -->
<div class="grid_6">
<p>400px</p>
</div>
<!-- end .grid_6 -->
<div class="clear">&nbsp;</div>
<div class="grid_9">
<p>610px</p>
</div>
<!-- end .grid_9 -->
<div class="grid_5">
<p>330px</p>
</div>
<!-- end .grid_5 -->
<div class="clear">&nbsp;</div>
<div class="grid_10">
<p>680px</p>
</div>
<!-- end .grid_10 -->
<div class="grid_4">
<p>260px</p>
</div>
<!-- end .grid_4 -->
<div class="clear">&nbsp;</div>
<div class="grid_11">
<p>750px</p>
</div>
<!-- end .grid_11 -->
<div class="grid_3">
<p>190px</p>
</div>
<!-- end .grid_3 -->
<div class="clear">&nbsp;</div>
<div class="grid_12">
<p>820px</p>
</div>
<!-- end .grid_12 -->
<div class="grid_2">
<p>120px</p>
</div>
<!-- end .grid_2 -->
<div class="clear">&nbsp;</div>
<div class="grid_13">
<p>890px</p>
</div>
<!-- end .grid_13 -->
<div class="grid_1">
<p>50px</p>
</div>
<!-- end .grid_1 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 suffix_13">
<p>50px</p>
</div>
<!-- end .grid_1.suffix_13 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_1 suffix_12">
<p>50px</p>
</div>
<!-- end .grid_1 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_2 suffix_11">
<p>50px</p>
</div>
<!-- end .grid_2 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_3 suffix_10">
<p>50px</p>
</div>
<!-- end .grid_3 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_4 suffix_9">
<p>50px</p>
</div>
<!-- end .grid_4 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_5 suffix_8">
<p>50px</p>
</div>
<!-- end .grid_5 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_6 suffix_7">
<p>50px</p>
</div>
<!-- end .grid_6 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_7 suffix_6">
<p>50px</p>
</div>
<!-- end .grid_7 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_8 suffix_5">
<p>50px</p>
</div>
<!-- end .grid_8 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_9 suffix_4">
<p>50px</p>
</div>
<!-- end .grid_9 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_10 suffix_3">
<p>50px</p>
</div>
<!-- end .grid_10 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_11 suffix_2">
<p>50px</p>
</div>
<!-- end .grid_11 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_12 suffix_1">
<p>50px</p>
</div>
<!-- end .grid_12 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 prefix_13 suffix_0">
<p>50px</p>
</div>
<!-- end .grid_13 -->
<div class="clear">&nbsp;</div>
<div class="grid_1 push_13">
<p>Push (50px)</p>
</div>
<!-- end .grid_1 .push_13 -->
<div class="grid_13 pull_1">
<p>Pull (890px)</p>
</div>
<!-- end .grid_13.pull_1 -->
<div class="clear">&nbsp;</div>
<div class="grid_2 push_12">
<p>Push (120px)</p>
</div>
<!-- end .grid_2 .push_12 -->
<div class="grid_12 pull_2">
<p>Pull (820px)</p>
</div>
<!-- end .grid_12.pull_2 -->
<div class="clear">&nbsp;</div>
<div class="grid_3 push_11">
<p>Push (190px)</p>
</div>
<!-- end .grid_3 .push_11 -->
<div class="grid_11 pull_3">
<p>Pull (750px)</p>
</div>
<!-- end .grid_11.pull_3 -->
<div class="clear">&nbsp;</div>
<div class="grid_4 push_10">
<p>Push (260px)</p>
</div>
<!-- end .grid_4 .push_10 -->
<div class="grid_10 pull_4">
<p>Pull (680px)</p>
</div>
<!-- end .grid_10.pull_4 -->
<div class="clear">&nbsp;</div>
<div class="grid_5 push_9">
<p>Push (330px)</p>
</div>
<!-- end .grid_5 .push_9 -->
<div class="grid_9 pull_5">
<p>Pull (610px)</p>
</div>
<!-- end .grid_9.pull_5 -->
<div class="clear">&nbsp;</div>
<div class="grid_6 push_8">
<p>Push (400px)</p>
</div>
<!-- end .grid_6 .push_8 -->
<div class="grid_8 pull_6">
<p>Pull (540px)</p>
</div>
<!-- end .grid_8.pull_6 -->
<div class="clear">&nbsp;</div>
<div class="grid_7 push_7">
<p>Push (470px)</p>
</div>
<!-- end .grid_7 .push_7 -->
<div class="grid_7 pull_7">
<p>Pull (470px)</p>
</div>
<!-- end .grid_7.pull_7 -->
<div class="clear">&nbsp;</div>
<div class="grid_8 push_6">
<p>Push (540px)</p>
</div>
<!-- end .grid_8 .push_6 -->
<div class="grid_6 pull_8">
<p>Pull (400px)</p>
</div>
<!-- end .grid_6.pull_8 -->
<div class="clear">&nbsp;</div>
<div class="grid_9 push_5">
<p>Push (610px)</p>
</div>
<!-- end .grid_9 .push_5 -->
<div class="grid_5 pull_9">
<p>Pull (330px)</p>
</div>
<!-- end .grid_5.pull_9 -->
<div class="clear">&nbsp;</div>
<div class="grid_10 push_4">
<p>Push (680px)</p>
</div>
<!-- end .grid_10 .push_4 -->
<div class="grid_4 pull_10">
<p>Pull (260px)</p>
</div>
<!-- end .grid_4.pull_10 -->
<div class="clear">&nbsp;</div>
<div class="grid_11 push_3">
<p>Push (750px)</p>
</div>
<!-- end .grid_11 .push_3 -->
<div class="grid_3 pull_11">
<p>Pull (190px)</p>
</div>
<!-- end .grid_3.pull_11 -->
<div class="clear">&nbsp;</div>
<div class="grid_12 push_2">
<p>Push (820px)</p>
</div>
<!-- end .grid_12 .push_2 -->
<div class="grid_2 pull_12">
<p>Pull (120px)</p>
</div>
<!-- end .grid_2.pull_12 -->
<div class="clear">&nbsp;</div>
<div class="grid_13 push_1">
<p>Push (890px)</p>
</div>
<!-- end .grid_13 .push_1 -->
<div class="grid_1 pull_13">
<p>Pull (50px)</p>
</div>
<!-- end .grid_1.pull_13 -->
<div class="clear">&nbsp;</div>
<div class="grid_14">
<p>This valid css/xhtml grid system is created by the <a href="http://www.gridsystemgenerator.com">Grid System Generator</a><br/>
Based on the 960.gs grid system.<br/>
<a href="http://validator.w3.org/check/referer">XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>
</div>
<!-- end .grid_14 -->
<div class="clear">&nbsp;</div>
</div>
<!-- end .container_14 -->
</body></html>